<template>
  <van-form @submit="submitSell">
    <van-field autocomplete="off"
      type="digit"
      v-model="sellCount"
      name="sellCount"
      label="挂牌卖出数量"
      :placeholder="'卖出数量, 最大值为' + myStockInfo.amount"
      :rules="[{ required: true, message: '请填写挂牌卖出的数量' }]"
    >
      <template #button>
        <van-button size="small" native-type="button">股</van-button>
      </template>
    </van-field>
    <van-field autocomplete="off"
      type="number"
      v-model="sellPrice"
      name="sellPrice"
      label="卖出价格"
      placeholder="卖出价格, 如0.666"
      :rules="[
        { required: true, message: '请填写卖出的价格'},
        { message: '只能输入3位小数的正数', pattern}
      ]"
      center
      clearable
    >
      <template #button>
        <van-button size="small" native-type="button">￥ / 股</van-button>
      </template>
    </van-field>
    <van-field autocomplete="off"
      v-model="computedTotalPrice"
      name="sellTotalPrice"
      label="合计"
      placeholder="自动计算中..."
      :rules="[{ required: true, message: '请填写合计' }]"
      disabled
    >
      <template #button>
        <van-button size="small" native-type="button">￥</van-button>
      </template>
    </van-field>
    <van-field autocomplete="off"
      v-model="tradePassword"
      type="password"
      name="tradePassword"
      label="支付密码"
      placeholder="请输入支付密码(必填)"
      :rules="[{ required: true, message: '请填写支付密码' }]"
    />

    <DebounceSubmitBtn :isSubmitBtnDisabled="isSubmitBtnDisabled" text-name="确定卖出" />
  </van-form>
</template>

<script>
  import DebounceSubmitBtn from "./DebounceSubmitBtn";
  import {mixin_btnStatus} from "../mixin/mixin_btn";
  import {Toast, Dialog } from 'vant';
  export default {
    name: 'comSellStock',
    props: ['myStockInfo'],
    components: {
      DebounceSubmitBtn,
    },
    mixins: [mixin_btnStatus],
    data(){
      return {
        // 卖出
        sellCount: '',
        sellPrice: '',
        sellTotalPrice: '',
        // 交易密码
        tradePassword: '',
        pattern:  /^[0-9]+(\.[0-9]{0,3})?$/,
      }
    },
    computed: {
      computedTotalPrice(){
        let res
        if (this.sellCount && this.sellPrice){
          res = (this.sellCount * this.sellPrice).toFixed(3)
        } else{
          res = ''
        }
        return res
      },
    },
    methods: {
      // 卖出
      submitSell(values){
        const {sellCount, sellPrice} = values
        if (sellCount*1 > this.myStockInfo.amount*1){
          Toast(`输入的卖出数量不合法， 最大值为${this.myStockInfo.amount}`)
        } else if (sellCount <= 0){
          Toast('输入的卖出数量值不合法， 必须大于0')
        } else {
          this._updateSubmitBtnStatus();
          if ( sellPrice*1000 <= this.myStockInfo.ysdayprice*1.1  &&  sellPrice*1000 >= this.myStockInfo.ysdayprice*0.9){
            const needData = {
              id: this.myStockInfo.stockid,
              amount: sellCount,
              price: sellPrice*1000,
              paypassword: this.$Base64.encode(this.$md5(values.tradePassword) + this.$md5('jinpin888')),
            }
            // 子组件调用父组件的方法， 并给父组件传递数据
            this.$emit("getSellParam", needData)
          } else if (this.myStockInfo.ysdayprice*1 === 0){
            // 没有开盘价
            const needData = {
              id: this.myStockInfo.stockid,
              amount: sellCount,
              price: sellPrice*1000,
              paypassword: values.tradePassword,
            }
            // 子组件调用父组件的方法， 并给父组件传递数据
            this.$emit("getSellParam", needData)
          } else {
            Dialog.alert({
              title: '卖出价格有异常！',
              message: `当日开盘价为: ￥${(this.myStockInfo.ysdayprice / 1000).toFixed(3)}。涨跌不超过10%, 输入的卖出价格应在￥${(this.myStockInfo.ysdayprice*0.9 / 1000).toFixed(3)}—￥${(this.myStockInfo.ysdayprice*1.1 / 1000).toFixed(3)}之间。此时输入的价格为￥${sellPrice}。请修改！`,
              messageAlign: 'left',
              confirmButtonColor: '#ee0a24',
              theme: 'round',
              className: 'message_style',
            }).then(() => {
              // on close
            });
          }
        }
      },
    },
  }
</script>

<style lang="css" scoped>

</style>
